<template>
  <div class="container">
    <div class="header w">
      <h1 class="logo">Inbook</h1>
      <div class="right">
        <div class="shopCart">
          <el-icon color="#fff" :size="24"><Goods /></el-icon>
          <i class="goods-num">8</i>
        </div>
        <div class="loginAndReg" v-if="!user.userInfo.id">
          <span @click="registerFn">注册</span>
          <span @click="loginFn">登录</span>
        </div>
        <div class="avator" v-else>
          <el-dropdown>
            <img
              v-imageError="imgSrc"
              :src="user.userInfo.profilePhotoUrl"
              alt=""
            />
            <span class="username">{{ user.userInfo.username }}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click="logoutFn">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <el-dialog
        v-model="loginVisible"
        title="登录"
        width="30%"
        center
        destroy-on-close
      >
        <LoginForm @setVisible="setVisible"></LoginForm>
      </el-dialog>

      <el-dialog
        v-model="registerVisible"
        title="注册"
        width="30%"
        center
        destroy-on-close
      >
        <RegisterForm @setVisible="setVisible"></RegisterForm>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts" name="HrederBar">
import { ref } from "vue";
import LoginForm from "../LoginForm/index.vue";
import RegisterForm from "../registerForm/index.vue";
import { Goods } from "@element-plus/icons-vue";
import useStore from "@/store";
import { ElMessage } from "element-plus";
import imgSrc from "@/assets/images/avator.jpg";

let loginVisible = ref<boolean>(false);
let registerVisible = ref<boolean>(false);
const { user } = useStore();

const loginFn = () => {
  loginVisible.value = true;
};
const registerFn = () => {
  registerVisible.value = true;
};
const setVisible = () => {
  loginVisible.value = false;
  registerVisible.value = false;
};
const logoutFn = () => {
  user.userLogout();
  ElMessage.success("退出成功");
};
</script>

<style scoped lang="less">
.container {
  height: 54px;
  background-color: #333;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  line-height: 1;

  .logo {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #fff;
  }
  .right {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    .shopCart {
      height: 36px;
      line-height: 36px;
      padding-top: 6px;
      margin-right: 20px;
      .goods-num {
        position: absolute;
        top: -5px;
        left: 16px;
        color: #fff;
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        background-color: #f00;
        border-radius: 20px;
      }
    }
    .loginAndReg {
      height: 36px;
      line-height: 36px;

      span {
        padding: 10px;
        color: #fff;
        cursor: pointer;
        &:hover {
          color: tomato;
        }
      }
    }
    .avator {
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      img {
        margin-right: 10px;
        height: 36px;
        border-radius: 50%;
      }
      .username {
        color: #eee;
      }
    }
  }
}
</style>
